<template>
  <div>
    <div class="d-flex justify-content-between">
      <div class="flex-1">
        <div class="mb-2 d-flex align-items-center">
          <img src="@/bigbank/assets/img/qymc.png" alt="" />
          <span class="r-title">{{ info.customer_name }}</span>
          <div class="r-status">
            <i class="el-icon-s-shop mr-1"></i>
            <span>正常</span>
          </div>
        </div>
        <div class="mb-3">
          <el-tag size="small" type="success">其他未列明建筑业</el-tag>
        </div>
      </div>
      <div>
        <el-button type="primary" @click="videoVisible = true">
          <i class="el-icon-video-camera" style="font-size: 2rem"></i>
        </el-button>
      </div>
    </div>
    <div class="bg-light p-2">
      <table class="table table-sm table-borderless mb-0">
        <tbody>
          <tr>
            <td>
              <i class="el-icon-date"></i>
              成立日期：
            </td>
            <td>{{ info.tbd_key }}</td>
            <td>
              <i class="el-icon-school"></i>
              登记机关：
            </td>
            <td>{{ info.register_no }}</td>
          </tr>
          <tr>
            <td>
              <i class="el-icon-tickets"></i>
              注册资本：
            </td>
            <td>{{ info.tbd_key }}</td>
            <td>
              <i class="el-icon-aim"></i>
              所属行业：
            </td>
            <td>{{ info.tbd_key }}</td>
          </tr>
          <tr>
            <td colspan="4">
              <i class="el-icon-location-information"></i>
              {{ info.address }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <video-iot-dialog :visible.sync="videoVisible" :farm-id="farmId"></video-iot-dialog>
  </div>
</template>

<script>
import VideoIotDialog from '@/bigbank/views/index/risk/VideoIotDialog.vue'

export default {
  components: {
    VideoIotDialog,
  },
  props: {
    relatedId: String,
  },
  data() {
    return {
      info: {},
      farmId: '',
      videoVisible: false,
    }
  },
  computed: {},
  watch: {
    relatedId: {
      handler: function (val) {
        if (val) {
          this.getData()
        } else {
          this.info = {}
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, 'customer_related', {
          'customer_related_id.eq': this.relatedId,
        })
        .then(res => {
          this.info = (res.data || [])[0] || {}
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.r-title {
  font-size: 18px;
  font-weight: bold;
}
.r-status {
  display: inline-block;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-weight: 700;
  height: 26px;
  line-height: 25px;
  margin-left: 1rem;
  padding: 0 1rem;
  color: #fff;
  background-color: #f9a32a;
}
</style>
